<template>
  <div>
    <div @click="all(msg)" class="home-one" v-if="this.showType==1?true:false">
      <div v-if="mains">
        <p class="title">
          <span>笔数：{{ StrokeNumber }}</span>
          <span>总金额：{{amount*StrokeNumber}}</span>
        </p>
        <ul class="aaa">
          <li class="OXXXX">
            <p>/</p>
            <div>
              <p v-for="(child,j) in 10" :key="j" @click="toggle_row(j)">
                <span>{{j}}</span>
              </p>
            </div>
            <p>&nbsp;</p>
          </li>
          <li>
            <p @click="OXXXX(4)">号码 口XXXX 赔率</p>
            <div>
              <p v-for="(child,j) in 10" :key="j" @click="ziji($event)">
                <span>{{ j }}XXXX</span>
                <span>99.9</span>
              </p>
            </div>
            <p>
              <el-button
                plain
                size="small"
                @click="OXXXX(index)"
                v-for="(item,index) in SingleDouble"
                :key="index"
              >{{ item }}</el-button>
            </p>
          </li>
          <li class="XOXXX">
            <p @click="XOXXX(4)">号码 X口XXX 赔率</p>
            <div>
              <p v-for="(child,j) in 10" :key="j" @click="ziji($event)">
                <span>X{{ j }}XXX</span>
                <span>99.9</span>
              </p>
            </div>
            <p>
              <el-button
                plain
                size="small"
                @click="XOXXX(index)"
                v-for="(item,index) in SingleDouble"
                :key="index"
              >{{ item }}</el-button>
            </p>
          </li>
          <li class="XXOXX">
            <p @click="XXOXX(4)">号码 XX口XX 赔率</p>
            <div>
              <p v-for="(child,j) in 10" :key="j" @click="ziji($event)">
                <span>XX{{ j }}XX</span>
                <span>99.9</span>
              </p>
            </div>
            <p>
              <el-button
                plain
                size="small"
                @click="XXOXX(index)"
                v-for="(item,index) in SingleDouble"
                :key="index"
              >{{ item }}</el-button>
            </p>
          </li>
          <li class="XXXOX">
            <p @click="XXXOX(4)">号码 XXX口X 赔率</p>
            <div>
              <p v-for="(child,j) in 10" :key="j" @click="ziji($event)">
                <span>XXX{{ j }}X</span>
                <span>99.9</span>
              </p>
            </div>
            <p>
              <el-button
                plain
                size="small"
                @click="XXXOX(index)"
                v-for="(item,index) in SingleDouble"
                :key="index"
              >{{ item }}</el-button>
            </p>
          </li>
          <li class="XXXXO">
            <p @click="XXXXO(4)">号码 XXXX口 赔率</p>
            <div>
              <p v-for="(child,j) in 10" :key="j" @click="ziji($event)">
                <span>XXXX{{ j }}</span>
                <span>99.9</span>
              </p>
            </div>
            <p>
              <el-button
                plain
                size="small"
                @click="XXXXO(index)"
                v-for="(item,index) in SingleDouble"
                :key="index"
              >{{ item }}</el-button>
            </p>
          </li>
        </ul>
      </div>
      <!-- 金额 -->
      <div class="plicenum">
        <div class="plice-one">金额：</div>
        <div>
          <el-input v-model="amount" placeholder></el-input>
        </div>
        <el-row style="margin-left:10px">
          <el-button type="primary" @click="Bets()">下注</el-button>
          <el-button type="primary">取消</el-button>
        </el-row>
      </div>
    </div>
    <!-- 已封盘 -->
    <div class="typeid" v-if="this.showType==2?true:false">
      <h1>已封盘</h1>
    </div>
  </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
  name: "homeOne",
  data() {
    return {
      mains:true,
      form: {
        msg: "",
        yesOrNo: "",
        content: ""
      },
      bet: "",
      tableData: [],
      SingleDouble: ["单", "双", "大", "小"],
      StrokeNumber: 0,
      msg: [],
      amount: ""
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState(["typedt", "showType"])
  },
  methods: {
    all(msg) {
      var arr = $(".main").length;
      this.StrokeNumber = arr;
    },
    automatic() {
      this.$api.post(this.$url.getInfo, {}, res => {
        console.log(res.data, "余额刷新");
        if (res.data.code == 200) {
          this.$store.commit("getUserMsg", JSON.stringify(res.data.data));
        }
      });
    },
    // 下注

    Bets() {
      var arr = $(".main");
      // arr.length = 0
      this.msg = [];
      for (let i = 0; i < arr.length; i++) {
        this.msg.push(arr[i].outerText.substring(0, 5));
      }
      this.StrokeNumber = this.msg.length;
      this.$api.post(
        this.$url.buy,
        {
          module: this.typedt,
          amount: this.amount,
          items: this.msg
        },
        res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "下注成功!"
            });
            
            this.automatic();
            this.mains = false
            setTimeout(()=>{
              this.mains = true
            },200)
            //  this.$router.go(0)
            this.amount = "";
            this.StrokeNumber = 0
          } else {
            this.$message.error(res.data.msg);
          }
        }
      );
    },
    toggle_row(i) {
      console.log(i, 81888);
    },
    init() {
      console.log($);
      for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
          let size = "<li><p>" + j + "XXXX</p></li>";
          $(".init").append(size);
        }
      }
    },
    OXXXX(i) {
      if (i == 0) {
        $(".aaa>li>div>p").removeClass("main");
        $(".aaa>li:eq(1)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa>li>div>p").removeClass("main");
        $(".aaa>li:eq(1)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa>li>div>p").removeClass("main");
        $(".aaa>li:eq(1)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa>li>div>p").removeClass("main");
        $(".aaa>li:eq(1)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa>li>div>p").removeClass("main");
        $(".aaa>li:eq(1)>div>p").toggleClass("main");
      }
      var data = [];
      for (let i = 0; i < $(".main").length; i++) {
        data.push(
          $(".main")
            .eq(i)
            .text()
            .slice(0, 5)
        );
      }
      console.log(data, "数量");
    },
    XOXXX(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(2)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(2)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(2)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(2)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(2)>div>p").toggleClass("main");
      }
    },
    XXOXX(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(3)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(3)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(3)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(3)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(3)>div>p").toggleClass("main");
      }
    },
    XXXOX(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(4)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(4)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(4)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(4)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(4)>div>p").toggleClass("main");
      }
    },
    XXXXO(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(5)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(5)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(5)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(5)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(5)>div>p").toggleClass("main");
      }
    },
    ziji(event) {
      if (event.currentTarget.className !== "main") {
        event.currentTarget.className = "main";
      } else {
        event.currentTarget.className = "";
      }

      // console.log(list)
    }
  },
  watch: {
    msg(val, oldVal) {
      //普通的watch监听
      console.log("a: " + val, oldVal);
    }
  }
};
</script>
<style lang="less" scoped>
.typeid {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.plicenum {
  display: flex;
  position: absolute;
  bottom: 15%;
  .plice-one {
    margin-top: 10px;
  }
}
.home-one {
  width: 100%;
  .title {
    width: 100%;
    background: rgb(114, 111, 111);
    color: aliceblue;
    text-align: center;
    span {
      padding: 0px 20px;
    }
  }
  .aaa {
    li {
      float: left;
      width: 19%;
      box-sizing: border-box;
      border: 1px solid #999;
      p {
        line-height: 35px;
        text-align: center;
        border-top: 1px solid #999;
      }
    }
    li:nth-child(1) {
      width: 3%;
    }
  }
}
.main {
  background: rgb(233, 223, 90);
}
.aaa {
  background: skyblue;
}
</style>
